<template>
  <div>
    <bread-crumb></bread-crumb>
    <div class="box">
    <h1>不带头像的信息</h1>
    <div class="tent">
      <el-table :data="info" style="width: 100%" border  size="mini" id="work-table">
        <el-table-column prop="stu_id" label="学号" width="80">
        </el-table-column>
        <el-table-column prop="stu_name" label="姓名" width="80">
        </el-table-column>
        <el-table-column prop="stu_sex" label="性别">
        </el-table-column>
        <el-table-column prop="stu_jg" label="籍贯" width="120">
        </el-table-column>
        <el-table-column prop="stu_date" label="出生日期" width="120">
          <template slot-scope="scope">
            <p>{{ $moment(scope.row.stu_date).format("YYYY-MM-DD") }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="stu_gbf" label="男或女朋友" width="120">
        </el-table-column>
        <el-table-column prop="stu_hobby" label="爱好">
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    :current-page="currentPage" @current-change="currentChange">
                </el-pagination>
      <el-button @click="exportExcel">将数据导出到本地的Excel当中</el-button>
    </div>
  </div>
  </div>
  
</template>

<script>
import request from '../../api/request';
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
  data() {
    return {
      info: [],
      total:0,
      pageSize:10,
      totalData:0,
      currentPage:1
    }
  },
  async mounted() {
    let stult = await request({ method: 'get', url: 'search_info_not', arg: {}, headerType: '' });
    this.info = stult.data;
    this.total = stult.data.length,
    this.totalData = stult.data,
    this.info = this.totalData.slice((this.currentPage - 1)*this.pageSize,
    this.currentPage*this.pageSize)
  },
  methods:{
    currentChange(value){
      this.info = this.totalData.slice((value - 1)*this.pageSize,
    value*this.pageSize)
    },
    exportExcel() {
      // 将table生成工作簿对象 参数一 table对象
      let wb = XLSX.utils.table_to_book(document.getElementById("work-table"), {
        raw: true,
      });

      // 根据工作簿当中的内容将其变为二进制 输出
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      // 将得到的二进制文件存储到Blob
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "stuInfo.xlsx"
        );
      } catch (e) {
        console.log(e);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;

  .tent {
    .el-pagination{
      text-align: center;
    }
      }
    }
</style>